import { View, Text, Image } from '@tarojs/components'

import './index.scss'

const phonetypes = [
  {
      url: require('../../../../assets/detailImg/deliverImg/deliver_type1.png'),
      color_choose: '亮黑色'
  },
  {
      url: require('../../../../assets/detailImg/deliverImg/deliver_type2.png'),
      color_choose: '星河银'
  },
  {
      url: require('../../../../assets/detailImg/deliverImg/deliver_type3.png'),
      color_choose: '翡翠冷'
  },
  {
      url: require('../../../../assets/detailImg/deliverImg/deliver_type4.png'),
      color_choose: '紫罗兰',
  },
  {
      url: require('../../../../assets/detailImg/deliverImg/deliver_type5.png'),
      color_choose: '丹霞橙'
  }
]

function Index () {
  return (
    <View className="delivery-container">
      <View className="delivery-containone">
        <View className="delivery-containone-texts1">
          <Text className="delivery-containone-text1">该商品最高可享12期分期免息</Text>
        </View>
        <View className="delivery-containone-texts">
          <View>
            <Text className="delivery-containone-text2">下单立减50元起</Text>
            <Text className="delivery-containone-text3">满5899减50</Text>
            <Text className="delivery-containone-text4">购买的积分</Text>
          </View>
          <View className="delivery-containone-img">
            <Text>查看</Text>
            <Image className="delivery-containone-img1" src={require('../../../../assets/icons/arrows.png')}></Image>
          </View>
        </View>
      </View>
      <View className="delivery-containtwo">
        <View className="delivery-containtwo-one">
          <View className="delivery-containtwo-one-1">
            <Image className="delivery-icon" src={require('../../../../assets/detailImg/deliverImg/deliver_logo1.png')} mode='aspectFit'></Image>
            <Text className="delivery-containtwo-one-intro">【首降600+12期免息】XX/XXMate 40 Pro 5G 全网通 (亮黑色) 全球n多人的选择，你值得拥有</Text>
          </View>
          <View className="delivery-containtwo-one-2">
            <Text>分享</Text>
            <Image className="delivery-share" src={require('../../../../assets/icons/arrows.png')}></Image>
          </View>
        </View>
        <View className="delivery-containtwo-two">
          <View className='delivery-containtwo-two-wrapper'>
            <Image className="delivery-like" src={require('../../../../assets/icons/like.png')}></Image>
            <Text>1.3万</Text>
          </View>
          <View className='delivery-containtwo-two-wrapper'>
            <Image className="delivery-like" src={require('../../../../assets/icons/icon-test.png')}></Image>
            <Text>送礼</Text>
          </View>
          <View className='delivery-containtwo-two-wrapper'>
            <Image className="delivery-like" src={require('../../../../assets/icons/persons.png')}></Image>
            <Text>帮我选</Text>
          </View>
        </View>
      </View>
      <View className="delivery-containthree">
        <View className="delivery-containthree-one">
          <Image className="delivery-containthree-one-img" src={require('../../../../assets/detailImg/evaluationImg/evaluation_logo3.png')} />
          <Text className="delivery-containthree-one-text">此商品3月5日开卖，请火速加购</Text>
        </View>
        <View className="delivery-containthree-two">
          <Text className="delivery-containthree-text">发货</Text>
          <View className="delivery-containthree-rights">
            <View className="delivery-containthree-right1-left">
              <Image className="delivery-containthree-two-img" src={require('../../../../assets/icons/04.png')} mode='aspectFit' />
              <Text className="delivery-containthree-two-1">北京海淀</Text>
              <Text>快递：0.00</Text>
            </View>
            <Text>月销5.0万+</Text>
          </View>
        </View>
        <View className="delivery-containthree-three">
          <View className="delivery-containthree-three-div">
            <Text className="delivery-containthree-text">活动</Text>
            <View className="delivery-containthree-rights">
              <View className="delivery-containthree-right-img">
                <Image className="delivery-containthree-three-img1" src={require('../../../../assets/detailImg/deliverImg/deliver_logo3.png')} mode='aspectFit' />
                <Text>旧机回收，以旧换新</Text>
              </View>
              <Image className="delivery-containthree-three-comimg" src={require('../../../../assets/icons/arrows.png')} mode='aspectFit' />
            </View>
          </View>
          <View className="delivery-containthree-three-div">
            <Text className="delivery-containthree-text"></Text>
            <View className="delivery-containthree-rights">
              <View className="delivery-containthree-right-img">
                <Image className="delivery-containthree-three-img1" src={require('../../../../assets/detailImg/deliverImg/deliver_logo2.png')} mode='aspectFit' />
                <Text>下单立送50元红包购买券</Text>
              </View>
              <Image className="delivery-containthree-three-comimg" src={require('../../../../assets/icons/arrows.png')} mode='aspectFit' />
            </View>
          </View>
        </View>
        <View className="delivery-containthree-four">
          <Text className="delivery-containthree-text">保障</Text>
          <View className="delivery-containthree-right">
            <Text className="delivery-containthree-right-text">假一赔十·免运费退换货·全国联保·极速退款</Text>
            <Image className="delivery-containthree-three-comimg" src={require('../../../../assets/icons/arrows.png')} />
          </View>
        </View>
        <View className="delivery-containthree-five">
          <View className="delivery-containthree-five-choose">
            <Text className="delivery-containthree-text">选择</Text>
            <View className="delivery-containthree-five-text">
              <Text className="delivery-text-ell">配送至：昌平区，选择 存储量,机身颜色，网络</Text>
              <Image className="delivery-containthree-three-comimg" src={require('../../../../assets/icons/arrows.png')} />
            </View>
          </View>
          <View className="delivery-containthree-right-bottom">
            <View className="delivery-phonetypes">
              {phonetypes.map(item => (
                <Image className="delivery-containthree-right-type" src={ item.url } mode='aspectFit' />
              ))}
            </View>
            <View>
              <Text className="delivery-containthree-right-text">共6种机身颜色可选</Text>
            </View>
          </View>
        </View>
        <View className="delivery-containthree-six">
          <Text className="delivery-containthree-text">参数</Text>
          <View className="delivery-containthree-right">
            <Text>网络类型 XX型号种类</Text>
            <Image className="delivery-containthree-three-comimg" src={require('../../../../assets/icons/arrows.png')} />
          </View>
        </View>
      </View>
    </View>
  )
}

export default Index
